<template>
  <div class="body">
    <swiper class>
      <template v-slot:swiper-con>
        <img
          src="https://pic.flnet.com/public/images/60/88/f1/e7ee850272a7e7dec5c8d3b29fef94b6a0bf9e20.jpg?1564365715#w"
          alt
        />
        <!-- <img
          src="https://pic.flnet.com/public/images/60/88/f1/e7ee850272a7e7dec5c8d3b29fef94b6a0bf9e20.jpg?1564365715#w"
          alt
        />-->
      </template>
    </swiper>

    <!-- <input class="input"  placeholder="请输入内容"></input> -->
    <div class="second">
      <div>
        <img
          src="https://pic.flnet.com/public/images/be/af/95/d1bc44ab4555bb3870902878c5d653ff007c7f7a.png?1563150227"
          alt
        />
        <div class="text">夏普家电</div>
      </div>
      <div>
        <img
          src="https://pic.flnet.com/public/images/3b/4f/76/c4b8f0403c9ca8cf4d6d00cfc635c98f3aa5ff84.png?1562237501"
          alt
        />
        <div class="text">领券中心</div>
      </div>
      <div>
        <img
          src="https://pic.flnet.com/public/images/37/be/a6/994717e81325c262bb9b6a09bdd797a8192fe16b.png?1562237539"
          alt
        />
        <div class="text">地方特产</div>
      </div>
      <div>
        <img
          src="https://pic.flnet.com/public/images/22/b4/64/7430262d025228f7846032658b76a4a314de5236.png?1563433775"
          alt
        />
        <div class="text">小富优选</div>
      </div>
      <div>
        <img
          src="https://pic.flnet.com/public/images/08/00/7b/851b7330d0e2eb44d353ddac90fe202e7cc36837.png?1563150259"
          alt
        />
        <div class="text">推广员专区</div>
      </div>
    </div>
    <div class="third">
      <img
        src="https://pic.flnet.com/public/images/d0/9e/78/c3f7ef882e54c1590c7e8288cdf06e47ae4ca110.jpg?1563344895#w"
        alt
      />
    </div>
    <div class="four">
      <img
        src="https://pic.flnet.com/public/images/3b/76/51/ac438d06795ab1bc51cecaff49f96ca55b3d5eaa.jpg?1564999462#w"
        alt
      />
    </div>
    <div class="five">
      <img v-for="(item,i) in imgArr" :key="i" :src="item.url" alt />
    </div>
    <div v-for="item in 3">
      <div class="six_p">
        <div class="six">
          <img
            src="http://pic.flnet.com/public/images/a8/20/f5/5e87b9ef23dcadd889c4c23f6b2b1936d64a8b14.png"
            alt
          />
        </div>
        <ul class="item_box">
          <li>
            <img
              src="http://pic.flnet.com/public/images/b3/a2/e0/fe7fc821b1afc13c3ce5ed9086ca4bfd4c53e1dc.jpg"
              alt
            />
          </li>
          <li>
            <img
              src="http://pic.flnet.com/public/images/b3/a2/e0/fe7fc821b1afc13c3ce5ed9086ca4bfd4c53e1dc.jpg"
              alt
            />
          </li>
          <li>
            <img
              src="http://pic.flnet.com/public/images/b3/a2/e0/fe7fc821b1afc13c3ce5ed9086ca4bfd4c53e1dc.jpg"
              alt
            />
          </li>
          <li>
            <img
              src="http://pic.flnet.com/public/images/b3/a2/e0/fe7fc821b1afc13c3ce5ed9086ca4bfd4c53e1dc.jpg"
              alt
            />
          </li>
          <li>
            <img
              src="http://pic.flnet.com/public/images/b3/a2/e0/fe7fc821b1afc13c3ce5ed9086ca4bfd4c53e1dc.jpg"
              alt
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="good">
      <img src="https://pic.flnet.com/public/mh/images/cn6-title.png" alt />
    </div>
    <div class="finally">
      <div class="item_goods">
        <img
          src="https://pic.flnet.com/public/images/7f/80/c3/4581a7896b08782fd18afa9bc653a1567d1e2684.jpg?1562119610#h"
          alt
        />
        <div class="info">
          <div class="title">美的（Midea）FTW18-12L 办公家用 台夹两用扇/小风扇/电风扇</div>
          <div class="price" >
            <span class="new_pirce">￥128</span>
            <span class="old_price">￥149</span>
          </div>
        </div>
      </div>
      <div class="item_goods">
        <img
          src="https://pic.flnet.com/public/images/7f/80/c3/4581a7896b08782fd18afa9bc653a1567d1e2684.jpg?1562119610#h"
          alt
        />
        <div class="info">
          <div class="title">美的（Midea）FTW18-12L 办公家用 台夹两用扇/小风扇/电风扇</div>
          <div class="price" >
            <span class="new_pirce">￥128</span>
            <span class="old_price">￥149</span>
          </div>
        </div>
      </div>
       <div class="item_goods">
        <img
          src="https://pic.flnet.com/public/images/7f/80/c3/4581a7896b08782fd18afa9bc653a1567d1e2684.jpg?1562119610#h"
          alt
        />
        <div class="info">
          <div class="title">美的（Midea）FTW18-12L 办公家用 台夹两用扇/小风扇/电风扇</div>
          <div class="price" >
            <span class="new_pirce">￥128</span>
            <span class="old_price">￥149</span>
          </div>
        </div>
      </div>
       <div class="item_goods">
        <img
          src="https://pic.flnet.com/public/images/7f/80/c3/4581a7896b08782fd18afa9bc653a1567d1e2684.jpg?1562119610#h"
          alt
        />
        <div class="info">
          <div class="title">美的（Midea）FTW18-12L 办公家用 台夹两用扇/小风扇/电风扇</div>
          <div class="price" >
            <span class="new_pirce">￥128</span>
            <span class="old_price">￥149</span>
          </div>
        </div>
      </div>
      <div class="item_goods">
        <img
          src="https://pic.flnet.com/public/images/7f/80/c3/4581a7896b08782fd18afa9bc653a1567d1e2684.jpg?1562119610#h"
          alt
        />
        <div class="info">
          <div class="title">美的（Midea）FTW18-12L 办公家用 台夹两用扇/小风扇/电风扇</div>
          <div class="price" >
            <span class="new_pirce">￥128</span>
            <span class="old_price">￥149</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import swiper from "./Swiper";

export default {
  data() {
    return {
      imgArr: [
        {
          url:
            "https://pic.flnet.com/public/images/2d/3b/f2/28cd4c842269a3d8215e533ff5caf43d619c47c3.jpg?1564472798#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/5c/21/44/ab24752740814d385627d1b5cb8005b34207ec71.jpg?1564035597#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/86/37/86/16415276f5b58fafae67296ef8141aa63406b625.jpg?1564971903#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/75/ac/fb/0874dcae12ef34c476fbb52ec60251bff575a0e2.jpg?1564971915#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/75/ac/b6/c598fc6c76328f17efcbcf2a183d3bddc3c8e6e9.png?1561344960#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/af/d1/3f/baac71b4d52fa8fe243a8b0098b64dd8877c92e5.jpg?1562827116#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/16/6c/c3/4a7276b22cefc47f19340b36bd2e155b99c570b2.jpg?1564330164#h"
        },
        {
          url:
            "https://pic.flnet.com/public/images/84/57/a9/c40db56b8e74d7b70a844e8784a01dad4cb80e8e.jpg?1564330123#h"
        }
      ]
    };
  },
  components: {
    swiper
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body{
  background: #f1f1f1;

}
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.body {
  background: #f1f1f1;
}
.swiper-wrapper img {
  width: 320px;
  height: 154px;
}
/* .input{
  width: 280px;
  height: 26px;
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 99;
  border-radius: 20px;
  background: rgba(white, white, white, 0.5)
} */
.second {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  margin-bottom: 10px;
  padding: 12px 0;
  justify-content: space-around;
  text-align: center;
}
.second img {
  width: 34px;
  height: 34px;
}
.text {
  font-size: 12px;
}
.third img {
  width: 320px;
  height: 42.6px;
}
.four img {
  width: 320px;
  height: 76.8px;
}
.five {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}
.five img {
  width: 79px;
  height: 110.92px;
  margin-bottom: 1px;
}
.six_p {
  position: relative;
}
.six img {
  width: 320px;
  height: 106.23px;
}
.item_box {
  position: absolute;
  top: 70px;
  left: 15px;
  white-space: nowrap;
  overflow-x: scroll;
  width: 640px;
  width: 305px;
  display: flex;
}
.item_box img {
  width: 79.36px;
  height: 115.19px;
  margin-right: 2px;

}
.six {
  margin-bottom: 80px;
}

.good img {
  width: 320px;
  height: 34.14px;
}
.finally {
  margin: 0 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item_goods {
  background: #fff;
  width: 147.19px;
  height: 200.53px;
  position: relative;
  margin-bottom: 10px;
}
.info{
  margin: 0 10px
}
.item_goods img {
  width: 114.33px;
  height: 114.33px;
  margin-left: 15px ;
  margin-top: 20px
}
.title {
  font-size: 12px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 10px;
 word-break: break-all
}

.new_pirce{
 font-size:12px;
  color: #008cd7; 
}
.old_price{
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}
.price{
  position: absolute;
  bottom:2px;
  left: 10px;
}
</style>
